<template>

   <div style="text-align: center;background-color: #F8F8F8;height: 100%;">
     <div  v-if="tag.isCondition==7">
        <p>{{ tag.code }}</p>
        <SvgIcon :size="size"  name="ele-Bottom"   :color="color" />     
     </div>

     <div  v-else-if="tag.isCondition==0">
        <SvgIcon :size="size"  name="ele-Back"   :color="color" />  
        <p>{{ tag.code }}</p>   
     </div>
     <div  v-else-if="tag.isCondition==1">
        <SvgIcon :size="size"  name="ele-Right"   :color="color" />  
        <p>{{ tag.code }}</p>   
     </div>
     <div  v-else-if="tag.isCondition==2">
        <SvgIcon :size="size"  name="ele-TopLeft"   :color="color" />  
        <p>{{ tag.code }}</p>   
     </div>
     <div  v-else-if="tag.isCondition==3">
        <SvgIcon :size="size"  name="ele-TopRight"   :color="color" />  
        <p>{{ tag.code }}</p>   
     </div>

     <div  v-else-if="tag.isCondition==4">
        <p>{{ tag.code }}</p>   
        <SvgIcon :size="size"  name="ele-BottomLeft"   :color="color" />  
       
     </div>

     <div  v-else-if="tag.isCondition==5">
        <p>{{ tag.code }}</p>   
        <SvgIcon :size="size"  name="ele-BottomRight"   :color="color" />  
       
     </div>

     <div  v-else-if="tag.isCondition==6">
        
        <SvgIcon :size="size"  name="ele-Top"   :color="color" />  
        <p>{{ tag.code }}</p>   
       
     </div>
       
    </div>
   
 </template>
   <script lang="ts" setup>
   import {ref} from "vue";

   const size=ref(20);
   const color=ref('red');
      //父级传递来的参数
    var props = defineProps({
     tag: {
     type: Object,
     default: { x: 0, y: 1, w: 1, h: 2, code: '10001',type:1,isCondition:0 },
     },
     });
 
   </script>